<template>
    <div class="login-box">
        <div class="login-wrap">
            <div class="top-bar">
                <!--<img src="../../assets/images/login/appLogo.png" alt />-->
            </div>
            <el-form :model="loginForm" label-width="120" class="form-wrap">
                <el-form-item style="text-align: center;">
                    <p>
                        <span class="title">{{ title }}</span>
                    </p>
                </el-form-item>
                <el-form-item prop="name" class="username">
                    <el-row>
                        <el-col :span="3">
                            <img src="../../assets/images/login/user.png" alt />
                        </el-col>
                        <el-col :span="21">
                            <el-input v-model="loginForm.name" placeholder="姓名"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="password" class="password">
                    <el-row>
                        <el-col :span="3">
                            <img src="../../assets/images/login/password.png" alt />
                        </el-col>
                        <el-col :span="21">
                            <el-input v-model="loginForm.password" placeholder="密码" type="password"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-row>
                        <el-button class="login-button" type="primary" @click="submitForm()">登录</el-button>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <div class="date-box">
            <div class="left">
                <p>{{ date }}</p>
                <p>{{ week }} {{apm}}</p>
            </div>
            <div class="right"></div>
        </div>
        <div class="location">
            <p>{{ title }}</p>
        </div>
        <div class="phone">
            <div>
                <img src="../../assets/images/login/phone.png" alt />
                <span>客服支持：{{ phone }}</span>
            </div>
        </div>
        <div class="QR-code">
            <div>
                <img :src="qrCode" alt />
            </div>
            <p>{{ title }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                date: "date",
                week: "week",
                apm: "apm",
                loginForm: {
                    name: "zengyou",
                    password: "888888"
                },
                background: "background",
                title: "title",
                qrCode: "qrCode",
                phone: "phone"
            };
        },
        created() {
            this.title = this.$store.state.headerTag.adminTitle;
        },
        methods: {
            submitForm() {
                this.loading = true;

                this.$http.post("login", this.loginForm).then(({code}) => {

                    if (code == 20000) this.$router.push({ name: "/" });


                    this.loading = false
                });;

            }
        }
    };
</script>

<style lang="scss" scoped>
    .login-box {
        width: 100%;
        height: 100%;
        position: relative;
        min-height: 700px;
        min-width: 1024px;
        background: url("../../assets/images/login/bg.jpg") no-repeat center;
        background-size: 100% 100%;
        .login-wrap {
            position: fixed;
            top: 100px;
            left: 10%;
            .top-bar {
                img {
                    width: 430px;
                }
            }
            .form-wrap {
                width: 430px;
                min-height: 430px;
                background-color: #fff;
                padding: 40px;
                border-radius: 6px;
                .title {
                    color: #5799ed;
                    font-size: 20px;
                }
                .username {
                    margin-top: 40px;
                }
                .password {
                    margin-top: 40px;
                }
                .login-button {
                    margin-left: 43px;
                    margin-top: 20px;
                    width: calc(100% - 43px);
                    line-height: 30px;
                }
            }
        }
        .date-box {
            position: absolute;
            top: 0;
            right: 10%;
            width: 300px;
            height: 10%;
            z-index: 9;
            display: flex;
            align-items: center;
            margin-top: 20px;
            justify-content: center;
            .left {
                flex: 1;
                p {
                    line-height: 30px;
                    color: #fff;
                    font-size: 18px;
                }
            }
            .right {
                flex: 1;
            }
        }
        .location {
            position: absolute;
            bottom: 50px;
            width: 100%;
            color: #97bcf1;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            p {
                margin-left: 150px;
            }
        }
        .phone {
            position: absolute;
            right: 100px;
            bottom: 50px;
            width: 100%;
            color: #97bcf1;
            width: 220px;
            height: 40px;
            font-size: 14px;
            div {
                display: flex;
                align-items: center;
                justify-self: center;
            }
        }
        .QR-code {
            position: absolute;
            right: 100px;
            bottom: 100px;
            display: flex;
            flex-direction: column;
            color: #97bcf1;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            img {
                // width: 125px;
                // height: 125px;
            }
        }
    }
</style>